<!--suppress HtmlUnknownTag -->
<script setup>
import Card from "@/components/Card.vue";
import {Lock, Setting, Switch} from "@element-plus/icons-vue";
import {onMounted, reactive, ref} from "vue";
import {ElMessage} from "element-plus";
import {changePassword, getUserPrivacy, saveUserPrivacy} from "@/api/user";

const saving = ref(true);

const formRef = ref()
const form = reactive({
    password: '',
    new_password: '',
    new_password_repeat: '',
})
const valid = ref(false);
const onValidate = (prop, isValid) => {
    valid.value = isValid;
}

const validatePassword = (_, value, callback) => {
    if (value === '') {
        callback(new Error('请再次输入密码'))
    } else if (value !== form.new_password) {
        callback(new Error("两次输入的密码不一致"))
    } else {
        callback()
    }
}

const rules = {
    password: [
        {required: true, message: '请输入原来的密码', trigger: 'blur'}
    ],
    new_password: [
        {required: true, message: '请输入新的密码', trigger: 'blur'},
        {min: 6, max: 16, message: '密码的长度必须在6-16个字符之间', trigger: ['blur']}
    ],
    new_password_repeat: [
        {required: true, message: '请再次输入新的密码', trigger: 'blur'},
        {validator: validatePassword, trigger: ['blur', 'change']},
    ]
}

function resetPassword() {
    formRef.value.validate(valid => {
        if (valid) {
            changePassword(form, () => {
                ElMessage.success('密码修改成功')
                formRef.value.resetFields()
            })
        }
    })
}

const privacy = reactive({
    phone: '',
    wx: '',
    qq: '',
    email: '',
    gender: '',
})

function savePrivacy(type, status) {
    saveUserPrivacy({
        type: type,
        status: status
    }, saving)
}

onMounted(() => {
    getUserPrivacy(data => {
        Object.assign(privacy, data)
        saving.value = false
    })
})
</script>

<template>
    <div style="margin: auto; max-width: 600px;">
        <div style="margin-top: 20px;">
            <card :icon="Setting" title="隐私设置" desc="对外公开" v-loading="saving">
                <div class="checkbox-list">
                    <el-checkbox @change="savePrivacy('phone', privacy.phone)"
                                 v-model="privacy.phone">公开展示我的手机号码
                    </el-checkbox>
                    <el-checkbox @change="savePrivacy('email', privacy.email)"
                                 v-model="privacy.email">公开展示我的电子邮箱
                    </el-checkbox>
                    <el-checkbox @change="savePrivacy('qq', privacy.qq)"
                                 v-model="privacy.qq">公开展示我的QQ
                    </el-checkbox>
                    <el-checkbox @change="savePrivacy('wx', privacy.wx)"
                                 v-model="privacy.wx">公开展示我的WX
                    </el-checkbox>
                    <el-checkbox @change="savePrivacy('gender', privacy.gender)"
                                 v-model="privacy.gender">公开展示我的性别
                    </el-checkbox>
                </div>
            </card>
            <card style="margin: 20px 0;" :icon="Setting"
                  title="修改密码"
            >
                <el-form ref="formRef" :model="form" :rules="rules" @validate="onValidate" label-width="100"
                         style="margin: 20px">
                    <el-form-item label="当前密码" prop="password">
                        <el-input :prefix-icon="Lock" v-model="form.password" type="password" placeholder="当前密码"
                                  maxlength="25"/>
                    </el-form-item>
                    <el-form-item label="新密码" prop="new_password">
                        <el-input :prefix-icon="Lock" v-model="form.new_password" type="password" placeholder="新密码"
                                  maxlength="25"/>
                    </el-form-item>
                    <el-form-item label="重复新密码" prop="new_password_repeat">
                        <el-input :prefix-icon="Lock" v-model="form.new_password_repeat" type="password"
                                  placeholder="重复新密码"
                                  maxlength="25"/>
                    </el-form-item>
                    <div style="text-align: center">
                        <el-button :icons="Switch" @click="resetPassword" type="success">重置密码</el-button>
                    </div>
                </el-form>
            </card>
        </div>
    </div>
</template>

<style scoped>
.checkbox-list {
    margin: 10px 0 0 10px;
    display: flex;
    flex-direction: column;
}
</style>